{extend name="public/base"}
<!--关于这个模板继承他是这样，比如现在这个index.html里面他继承了base.html,然后在base里面，有一个{block name='index'}，这里实现了{block name='index'}，那么base.html,中的{block name='index'}{/block}这一块，
就直接换成了{block name='index'}layui-this{/block}中的layui-this，{block name="main"}{/block}这一块就直接换成了这里的{block name="main"}直到结束标语{/block}这里的内容了-->
{block name='index'}layui-this{/block}
{block name="main"}

<div class="layui-carousel" id="ID-carousel-demo-1">
    <div carousel-item>
        <div><img src="/static/img/1.png" width="100%" height="100%" alt=""></div>
        <div><img src="/static/img/2.png" width="100%" height="100%" alt=""></div>

    </div>
</div>

<div style="background-color: #fff;padding: 8px 16px;margin-top: 10px; margin: 10px 0px">

    <span class="layui-breadcrumb" lay-separator="|">
  <a href="">语文</a>
  <a href="">数学</a>
  <a href="">英语</a>
  <a href="">理宗</a>
  <a href="">文宗</a>
</span>

</div>

<div>
    <div class="layui-card">
        <div class="layui-card-header" style="background-color: #16baaa">最近更新 <span style="position: absolute;right: 10px"><a
                style="color: azure" href="#">更多</a></span></div>
        <div class="layui-card-body">
            <ul>
                <li style="margin: 6px 0px;border-bottom: 1px dotted#008800;padding: 5px;">
                    <span>[06-13]</span>
                    <a href="#">广东物理二模</a>
                    <span style="position: absolute;right: 10px">[类型模拟卷|适用高三。]</span>
                </li>
                <li style="margin: 6px 0px;border-bottom: 1px dotted#008800;padding: 5px;">
                    <span>[06-13]</span>
                    <a href="#">广东物理二模</a>
                    <span style="position: absolute;right: 10px">[类型模拟卷|适用高三。]</span>
                </li>
            </ul>
        </div>
    </div>
</div>

{/block}
{block name="js"}
<script>
    layui.use(function(){
        var carousel = layui.carousel;
        // 渲染 - 常规轮播
        carousel.render({
            elem: '#ID-carousel-demo-1',
            width: 'auto'
        });

        // 渲染 - 设置时间间隔、动画类型、宽高度等属性
        carousel.render({
            elem: '#ID-carousel-demo-2',
            interval: 1800,
            anim: 'fade',
            width: 'auto',
            height: '120px'
        });
    });
</script>
{/block}